<template>
    <view class="min-h-screen bg-[#f0f0f0] pb-[32rpx]">
      <!-- 顶部图片区域 -->
      <image class="w-full h-[450rpx] object-cover" src="@/assets/imgs/shan.png" mode="aspectFill"></image>
  
      <!-- <image class="w-full h-[500rpx] object-cover absolute left-0 top-[320rpx] z-20" src="@/assets/imgs/shui.png" mode="aspectFill"></image> -->
  
      <!-- 内容卡片 -->
      <view class="w-[660rpx] mx-auto p-[32rpx] bg-white mt-[-120rpx] rounded-[32rpx] shadow-lg relative z-10 mb-[80rpx]" v-if="calendarData.length > 0">
        <block v-for="(item, index) in calendarData" :key="index" @click="toDetail(item)">
          <view class="w-full flex gap-4 mb-[40rpx]">
            <!-- 日期卡片 -->
            <view class="w-[180rpx] h-[200rpx] bg-[#eee] flex flex-col justify-center items-center p-[20rpx] box-border">
              <view class="flex flex-col items-center">
                <text class="text-[32rpx] text-[#c8a566] mb-[10rpx]">{{ item.month }}</text>
                <text class="text-[60rpx] font-bold text-[#c8a566]">{{ item.day }}</text>
              </view>
            </view>
            
            <!-- 描述内容 -->
            <view class="flex-1 flex flex-col">
              <text class="text-[36rpx] font-bold mb-[20rpx]">南山会施法</text>
              <text class="text-[28rpx] text-[#333] leading-[1.6]">{{ item.title }}</text>
            </view>
          </view>
        </block>
      </view>
    </view>
  </template>
  
  <script setup>
  import { ref, onMounted } from "vue";
  import http from "@/utils/http";
  import { getFullPath } from "@/utils/config";
  
  const calendarData = ref([
    {
      id: 1,
      month: "5月",
      day: "22",
      title: "供养完成后，系统将自动生成您的专属供养记录与电子供养证书，积聚福德，回向自己与亲人，护佑身心平安。",
    },
    {
      ceremonytime: "2025-06-28",
      content: "<p>南山法会</p>",
      createtime: "2025-06-27 10:53:06",
      id: 1,
      is_del: 0,
      title: "南山法会",
    },
    
  ]);

  onMounted(() => {
    console.log("onMounted");
    getGoods();
  });

  function toDetail(item) {
    // Taro.navigateTo({
    //   url: `/other/home/plan-detail?id=${item.id}`,
    // });
  }

  function getGoods() {
    http.post("/index.php/index/api/index", {
      Func: "getCeremonyList",
      data: {
        startpage: 1,
        pagesize: 10,
      },
    }).then((res) => {
      console.log("res", res);
      if(res?.error == 0) {
        calendarData.value = res.data;
        calendarData.value.forEach(item => {
          item.month = item.ceremonytime.split("-")[1];
          item.day = item.ceremonytime.split("-")[2];
        });
      }
    });
  }
  </script>